<template>
  <div id="chart1">

  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "echarts-one",
  data() {
    return {
      myEcharts:'',
      options : {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        grid: [{
          top: '15%',
          bottom:'12%',
        }],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#055bdb'
              }
            }
          },
        ]
      }
    }
  },
  methods:{
    initChart() {
      const chartDom = document.getElementById('chart1');
      this.myEcharts = echarts.init(chartDom);
      this.options && this.myEcharts .setOption(this.options);
    },
  },
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";
*{font-size: px2vh(16)}
    #chart1{
      width: 100%;
      height: 100%;
    }
</style>
